<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .box1{
            width: 332px;
            height: 314px;
            margin-left: 30px;
            margin-top: 20px;
            display: inline-block;
        }
        .img1{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .person{
            text-align: center;
        }
        .person span{
            position: relative;
            bottom: 13px;
        }
        .font-style{
            font-size: 12px;
            color: rgb(32, 160, 255);
            margin-left: 20px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <h3>用户列表</h3>
    <div id="app">
        <el-card class="box-card box1" v-for="user in users">
            <div slot="header" class="clearfix">
                <span>{{user.realname}}</span>
                <el-button style="float: right; padding: 3px 0;color: #ff0509" type="text" icon="el-icon-delete"
                           @click="deleteUser(user.id)">删除
                </el-button>
            </div>
            <div class="person">
                <a href="">
                    <img class="img1" :src="user.icon" :title="user.realname">
                </a>
                <span>{{user.realname}}</span>
            </div>
            <div class="name font-style">
                <span>用户名:</span>
                <span>{{user.username}}</span>
            </div>
            <div class="realname font-style">
                <span>真实姓名:</span>
                <span>{{user.realname}}</span>
            </div>
            <div class="telephone font-style">
                <span>手机号:</span>
                <span>{{user.telephone}}</span>
            </div>
            <div class="font-style" style="text-align: left;color:#20a0ff;font-size: 12px;margin-top: 13px;display: flex;align-items: center">
                <span>用户状态:</span>
                <el-switch
                        v-model="user.state"
                        active-text="启用"
                        active-color="#13ce66"
                        @change="userState(user.id)"
                        inactive-text="禁用" style="font-size: 12px">
                </el-switch>
            </div>
            <div class="font-style">
                <span>用户角色:</span>
                <el-tag
                        v-for="role in user.roles"
                        :key="role.id"
                        size="mini"
                        style="margin-right: 8px"
                        type="success">
                    {{role.name}}
                </el-tag>
                <el-popover
                        placement="right"
                        title="角色列表"
                        width="200"
                        trigger="click"
                        @hide="modifyRole(user.id)">
                    <el-select
                            v-model="roleName"
                            :key="roles.id"
                            multiple
                            placeholder="请选择"
                            size="mini">
                        <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>

                    <el-button
                            type="text"
                            slot="reference"
                            icon="el-icon-more"
                            @click="showRole(user.roles)">

                    </el-button>
                </el-popover>
            </div>
        </el-card>
        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>
        <el-button style="margin-top: 10px;" icon="el-icon-plus" size="mini" @click="dialogFormVisible = true">添加用户</el-button>
        <el-dialog title="用户操作" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="user">
                <el-form-item label="用户名">
                    <el-input v-model="user.username" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="user">
                <el-form-item label="用户密码">
                    <el-input v-model="user.password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="user">
                <el-form-item label="用户真实姓名">
                    <el-input v-model="user.realname" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="user">
                <el-form-item label="手机号">
                    <el-input v-model="user.telephone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="user">
                <el-form-item label="用户头像">
                    <el-input v-model="user.icon" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                users: [],
                role: [],
                roles: [],
                roleName: [],
                cpRoleName: [],
                // 用户信息
                user: {},
                // 当前页数
                currentPage: 1,
                // 订单总数
                count : 0,
                // 每页的数据
                page_size : [4,8],
                // 当前每页的数据
                pageSize : 4,
                // 分页背景
                back: true,
                // 添加用户模态框
                dialogFormVisible: false,
            }
        },
        methods: {
            // 加载所有用户信息
            loadUsers() {
                axios.get("/users/"+this.currentPage+"/"+this.pageSize)
                    .then(res => {
                        this.users = res.data.data;
                        this.count = res.data.count;
                    })
            },
            // 加载所有角色信息
            loadRoles(){
                axios.get("/roles")
                    .then(res => {
                        this.roles = res.data;
                    })
            },
            // 修改用户角色
            modifyRole(id){
                let count = 0;
                if(this.cpRoleName.length == this.roleName.length && this.cpRoleName.length == 0){
                    return;
                }
                if(this.cpRoleName.length == this.roleName.length){
                    for (let i = 0; i < this.cpRoleName.length; i++) {
                        if(this.cpRoleName[i] == this.roleName[i]){
                            count++;
                        }
                        if(count == this.cpRoleName.length){
                            return;
                        }
                    }
                }
                axios.post("/user-role",{id:id,roleName:this.roleName})
                    .then(res => {
                        if(res.data == "ok"){
                            this.$message({
                                type: 'success',
                                message: '更新成功!'
                            });
                            this.loadUsers();
                        }
                    })
            },
            // 添加用户
            addUser() {
                axios.post("/user", this.user)
                    .then(res => {
                        if(res.data == "ok"){
                            this.loadUsers();
                        }
                    });
                this.dialogFormVisible = false;
            },
            // 将用户角色名添加到角色名数组中
            showRole(roles){
                this.roleName = [];
                for(let i=0; i<roles.length; i++){
                    this.roleName.push(roles[i].name);
                }
                this.cpRoleName = this.roleName;
            },
            // 删除用户
            deleteUser(id){
                this.$confirm('删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/user/" + id)
                        .then(res => {
                            if(res.data == "ok"){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.loadUsers();
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 更新用户状态
            userState(id){
                axios.put("/user/" + id)
                    .then(res => {
                        if(res.data == "ok"){
                            this.$message({
                                type: "success",
                                message: "更新成功"
                            })
                        }
                    })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadUsers();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadUsers();
            },
        },
        mounted() {
            this.loadUsers();
            this.loadRoles();
        }
    });
</script>

</html>